const app = getApp()


Page({
  data: {
    staticUrl: app.globalData.staticUrl,
    windowWidth: wx.getSystemInfoSync().windowWidth, //单位px
    windowHeight: wx.getSystemInfoSync().windowHeight, //单位px
    imgArr: [
     ], //图片数组
     ALLimgArr: [
    ], //图片数组
     flag:true,
     pageno:1,
     start:0,
     end:9,
     timer:10,
     isauto:false,
     timerobj:"",
     index:0,
     id:1,
     ispreview:false,
     previewimage:'',
    

     distance: 0, // 手指移动的距离
    scale: 1, // 缩放比例
    baseWidth: '', // 图片实际宽度
    baseHeight: '', // 图片实际高度
    initWidth: '', // 图片默认显示宽度
    initHeight: '', // 图片默认显示高度
    scaleWidth: '', // 图片缩放后的宽度
    scaleHeight: '', // 图片缩放后的高度

    timerpercent:0,

  },

  onLoad:function(options){
    // 获取屏幕宽度
    this.width = wx.getSystemInfoSync().windowWidth;
      this.getintroduce();
},

changetimervalue:function(e){
  this.setData({timer:e.detail.value,});
  let {timerobj} = this.data;
  if(timerobj){
    clearInterval(timerobj);
 }
 this.setData({timerobj:''});
  this.changeauto();
},

changeauto:function(e){
  console.log(e);
  var isauto = false;
  if(e){
    isauto = e.detail.value;
  }
  else{

     isauto = this.data.isauto?true:false;
  }
    this.setData({isauto:isauto,});
    let {timerobj,timer,timerpercent} = this.data;
    if(this.data.isauto){
      var index= 1;
      timerobj = setInterval(function(){
           if(index<timer){
             index++;
             timerpercent = index/timer * 100;
              
           }
           else{
                this.openautochange();
                index = 0; 
                timerpercent = 0;
           }
           this.setData({timerpercent});
       }.bind(this),1000);
       this.setData({timerobj});
    }
    else{
      if(timerobj){
         clearInterval(timerobj);
      }
      this.setData({timerobj:''});
    }
},

openautochange(){
  let {timerobj,timer,imgArr,id,index} = this.data;
  
    
   
    if(id<imgArr[imgArr.length-1].id){
      this.change();
   }
  else{
    if(timerobj){
      clearInterval(timerobj);
    }
    this.setData({timerobj:''});
  }
  
  
},


getintroduce:function(id){
  var that = this;
  let {imgArr} = this.data;
  wx.showNavigationBarLoading();
  app.getintroduce(that.data.pageno,function(res){
    // 对返回的数据进行改写
    if(res.data.data){
    console.log( res.data.data);
    let arr = [];
    res.data.data.forEach((ele,index)=>{

        let obj = {};
        obj.isturn = false;
        obj.src = ele.pic;
        obj.id = ele.id;
        if(ele.id==1){
            obj.zIndex = 3
        }else if(ele.id==2){
          obj.zIndex = 2
        }else {
            obj.zIndex = 1
        }
        arr.push(obj);

    })
    
    that.setData({imgArr:arr});
    that.changearraydisplay(id);
    
    console.log(imgArr);
  
  }
  },function(){wx.hideNavigationBarLoading();});
},

finish:function(e){
  console.log(e);
},

changearraydisplay(id){
    let {start,end,imgArr} = this.data;
    var pagesize = 9;
    if(id){
        if(id - 3>=1){
           start = id-3;
           end = start + pagesize;
        }
        else if(id -3 + pagesize>imgArr.length){
          start = id-3;
          end = imgArr.length - id-3;
        }
        else{
          start = 0;
        }
        
    }
   
    this.setData({start,end});
  },
  // 点击图片切换类名来控制翻页效果
change(e){
    if(this.data.flag){
        this.data.flag = true;
        let index;
        let id;
        console.log(e);
        if(!e){
          index = this.data.index;
          id= this.data.id;
        }
        else{
          index=e.currentTarget.dataset.index;
          id=e.currentTarget.dataset.id;
        }
        let imgs = this.data.imgArr;
        imgs.map((ele,i)=>{
            if(id==ele.id){
                imgs[i].isturn = !imgs[i].isturn;
                imgs[i].zIndex = 4;
            }
          else if(ele.id == id-1 &&  i>=0){
              imgs[i].zIndex = 3;          
            }
          else  if(ele.id == id+1 &&  i<imgs.length){
              imgs[i].zIndex = 3;            
            }
          else if(ele.id == id-2 &&  i>=0){
              imgs[i].zIndex = 2;        
          }
          else  if(ele.id == id+2 &&  i<imgs.length){
              imgs[i].zIndex = 2; 
          }
            else{
                imgs[i].zIndex = 1;
              
            }
        })
        this.setData({
            imgArr:imgs
        })
      this.changearraydisplay(id);
      console.log('index&id',index,id);
      if(id>=this.data.id){ //翻页
          id= id +1;
          index = index+1;
      }
      else{ //回翻

      }
      this.setData({index:index,id:id});
    }
},

openimage:function(e){
  this.setData({ispreview:true,
  previewimage:e.currentTarget.dataset.src})
},

cloeseimage:function(){
  this.setData({ispreview:false,
    previewimage:''})
},

 /**
   * 监听图片加载成功时触发
   */
  imgload: function (e) {
    this.multiple = e.detail.width / this.width; // 计算原图和默认显示的倍数
    let height = this.multiple > 1 ? e.detail.height / this.multiple : e.detail.height; // 等比例计算出默认高度
    let width = this.multiple > 1 ? this.width : e.detail.width;
    this.setData({
      baseWidth: e.detail.width, // 获取图片实际宽度
      baseHeight: e.detail.height, // 获取图片实际高度
      initWidth: width,
      initHeight: height,
      scaleWidth: width,
      scaleHeight: height,
    })
  },
  /**
   * 双手指触发开始 计算开始触发两个手指坐标的距离
   */
  touchstartCallback: function (e) {
    // 单手指缩放开始，不做任何处理
    if (e.touches.length == 1) return;
    let distance = this.calcDistance(e.touches[0], e.touches[1]);
    this.setData({
      'distance': distance,
    })
  },
  /**
   * 双手指移动   计算两个手指坐标和距离
   */
  touchmoveCallback: function (e) {
    // 单手指缩放不做任何操作
    if (e.touches.length == 1) return;
    let distance = this.calcDistance(e.touches[0], e.touches[1]);
    // 计算移动的过程中实际移动了多少的距离
    let distanceDiff = distance - this.data.distance;
    let newScale = this.data.scale + 0.005 * distanceDiff;
    
    if (newScale >= this.multiple && this.multiple > 2) { // 原图比较大情况
      newScale = this.multiple;
    } else if (this.multiple < 2 && newScale >= 2) { // 原图较小情况
      newScale = 2; // 最大2倍
    };
    // 最小缩放到0.3
    if (newScale <= 0.3) {
      newScale = 0.3;
    };
 
    let scaleWidth = newScale * this.data.initWidth;
    let scaleHeight = newScale * this.data.initHeight;
    this.setData({
      distance: distance,
      scale: newScale,
      scaleWidth: scaleWidth,
      scaleHeight: scaleHeight,
      diff: distanceDiff
    });
  },
 /**
   * 计算两个手指距离
   */
  calcDistance(pos0, pos1) {
    let xMove = pos1.clientX - pos0.clientX;
    let yMove = pos1.clientY - pos0.clientY;
    return (Math.sqrt(xMove * xMove + yMove * yMove));
  }

})
